<template>
  <div class="view-content">
    <el-button type="primary" @click="downloadClick">DownLoad</el-button>

    <div style="margin: 24px 0">
      <el-upload
        ref="uploadRef"
        :auto-upload="false"
        @change="onChange"
        multiple
      >
        <template #trigger>
          <el-button type="primary">select file</el-button>
        </template>
      </el-upload>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { UploadFile } from 'element-plus'
import { ref } from 'vue'
// import VueOffice from '@vue-office/excel'
import { downloadFile } from '@/utils'
import axios from 'axios'

const Raw = ref<File>()

function downloadClick() {
  console.log('downloadClick')
}

async function onChange(file: UploadFile) {
  console.log('onChange', file)
}

function autoDownload(path: string) {
  fetch(path).then(async (res) => {
    const blob = new Blob([await res.arrayBuffer()], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    downloadFile(blob)
  })
  axios.get(path, { responseType: 'arraybuffer' }).then((res) => {
    const blob = new Blob([res.data], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    })
    downloadFile(blob, 'blob')
  })
}

const xlsx = '/12345.xlsx'
const md = '/tx.md'

// autoDownload(xlsx)
</script>
